<template>
	<view class="u-border-top">
		<view class="u-m-t-20" style="background: #fff;">
			<view class="u-f u-border-bottom u-p-30">
				<view class="u-f1">手机号</view>
				<view class="u-f3" >
					<input type="number" v-model="post.username" placeholder="请输入" />
				</view>
			</view>
			<view class="u-f u-border-bottom u-p-30">
				<view class="u-f1">密码</view>
				<view class="u-f3" >
					<input type="text" v-model="post.password" placeholder="请输入" />
				</view>
			</view>
			<view class="u-f u-border-bottom u-p-30">
				<view class="u-f1">姓名</view>
				<view class="u-f3" >
					<input type="text" v-model="post.name" placeholder="请输入" />
				</view>
			</view>
			<view class="u-f u-border-bottom u-p-30">
				<view class="u-f1">区域</view>
				<view class="u-f3" @click="show=true">
					<input type="text" style="pointer-events:none" disabled v-model="post.district_name" placeholder="请选择" />
				</view>
			</view>
			<view class="u-f u-border-bottom u-p-30">
				<view class="u-f1">学校</view>
				<view class="u-f3" @click="showTap">
					<input type="text" style="pointer-events:none" disabled v-model="post.school_name" placeholder="请选择" />
				</view>
			</view>
			<view class="u-f u-border-bottom u-p-30">
				<view class="u-f1">年级</view>
				<view class="u-f3" @click="show2=true">
					<input type="text" style="pointer-events:none" disabled v-model="post.grade_name" placeholder="请选择" />
				</view>
			</view>
			<view class="u-f u-border-bottom u-p-30">
				<view class="u-f1">班级</view>
				<view class="u-f3" @click="show3=true">
					<input type="text" style="pointer-events:none" disabled v-model="post.grade_class_name" placeholder="请选择" />
				</view>
			</view>
			
		</view>
		
		<!-- <view class="color-9 fsz24 agreement u-f-justify u-m-t-30">
			<label class="radio" @click="isAgree=!isAgree">
				<radio value="222" :checked="isAgree" color="#3C83FF" />
			</label>
			<span @click="isAgree=!isAgree">我已阅读</span>
						<text @click="goAgreement()" class="color-o">用户协议</text>
			和
			<text @click="goPrivacy()" class="color-o">隐私政策</text>
		</view> -->
		<!-- <view class="u-p-20 u-font-24" style="color: #999;">备注：如以上系统无所在学校，请选择其他学校，然后在其它学校输入框中填写所在学校全称</view> -->
		

		<view class="btn" @tap="submit()">注册</view>


		<u-select v-model="show" :list="selectList" mode="single-column" @confirm="confirm"></u-select>

		<u-select v-model="show1" :list="schoolList" mode="single-column" @confirm="confirm1"></u-select>
		<u-select v-model="show2" :list="gradeAttr" mode="single-column" @confirm="confirm2"></u-select>
		<u-select v-model="show3" :list="gradeClassAttr" mode="single-column" @confirm="confirm3"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				post: {
					username: '',
					password: '',
					name: '',
					district_id: '',
					district_name: '',
					school_id: '',
					school_name: '',
					grade_id: '',
					grade_name: '',
					grade_class_id: '',
					grade_class_name: '',
				},
				isAgree:false,
				show: false,
				show1: false,
				show2: false,
				show3: false,
				
				selectList: [],
				schoolList: [],
				gradeAttr: [],
				gradeClassAttr: [],
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			}
			this.areaList()
		},
		methods: {
			goPrivacy() {
				uni.navigateTo({
					url: '/pages/index/article'
				})
			},
			areaList() {
				this.$api.areaList({}, res => {
					if (res.code==1) {
						let arr = [];
						for (let i in res.data) {
							arr.push({
								value: res.data[i].id,
								label: res.data[i].name
							})
						}
						this.selectList = arr;
					}
				})
				
					this.$api.gradeList({}, res => {
						if (res.code==1) {
							let arr = [];
							for (let i in res.data) {
								arr.push({
									value: res.data[i].id,
									label: res.data[i].name
								})
							}
							this.gradeAttr = arr;
						}
					})
				
				this.$api.gradeClass({}, res => {
					if (res.code==1) {
						let arr = [];
						for (let i in res.data) {
							arr.push({
								value: res.data[i].id,
								label: res.data[i].name
							})
						}
						this.gradeClassAttr = arr;
					}
				})
				
			},
			confirm(e) {
				this.post.district_id = e[0].value;
				this.post.district_name = e[0].label;
				this.$api.schoolList({
					district_id: e[0].value
				}, res => {
					if (res.code==1) {
						let arr = [];
						for (let i in res.data) {
							arr.push({
								value: res.data[i].id,
								label: res.data[i].name
							})
						}
						this.schoolList = arr;
						// let other = {
						// 	value: '',
						// 	label: '其他'
						// }
						// this.schoolList.push(other)
					}
				})
			},
			showTap() {
				if (!this.post.district_id) {
					return this.$common.errorToShow('请先选择区域')
				}
				this.show1 = true;
			},
			confirm1(e) {
				this.post.school_name = e[0].label;
				this.post.school_id = e[0].value;
			},
			confirm2(e) {
				this.post.grade_name = e[0].label;
				this.post.grade_id = e[0].value;
			},
			confirm3(e) {
				this.post.grade_class_name = e[0].label;
				this.post.grade_class_id = e[0].value;
			},
			submit() {
				// if (!this.isAgree) {
				// 	this.$common.errorToShow('请阅读隐私政策！')
				// 	return
				// }
				this.addsubmit()
			},
			addsubmit() {
				if (!this.post.username) {
					this.$common.errorToShow('请输入手机号')
					return;
				}
				if (!/^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(this.post.username)) {
					this.$common.errorToShow('请输入正确手机号')
					return;
				}
				this.$api.register(this.post, res => {
					if (res.code==1) {
						
							this.$common.errorToShow('注册成功', () => {
								this.$db.set('userToken',res.data.userinfo.token)
								uni.redirectTo({
									url:'/pages/index/index'
								})
							})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style>
	.btn {
		font-size: 32rpx;
		color: #fff;
		border-radius: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		width: 500rpx;
		display:block;
		background: linear-gradient(90deg, #3D7EEA 8.12%, #02B0F1 95.73%);
		border-radius: 50rpx;
		line-height: 72rpx;
		margin: 120rpx auto 0;
		text-align: center;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 30rpx;
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		z-index: 60;
	}
	.price {
		color: #DF0000;
	}
</style>